* {
  box-sizing: border-box;				/* defineert dat een pad ook met de breedte wordt meegenomen
}

/* =============================== ACHTERGROND KLEUR ====================== */
body 
{
	background-color: #f1f1f1;
	margin: 0;
}

/* =============================== EINDE ACHTERGROND KLEUR ====================== */

/* =============================== BUTTONS ====================== */
.button_calc {
  background-color: #f1f1f1;
  border: 2px solid #ffb052;
  color: black;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.25vw; 				/* als percentage van de maximale breedte van het scherm */	
  color: #383333;
  font-family: Arial, Helvetica, sans-serif;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button_calc:hover {
  background-color: #ffb052;
  color: white;
}


/* =============================== EINDE BUTTONS ====================== */


/* ============================== LETTERTYPE LAYOUT ============================ */
/*normale tekst:*/
t1 
{
	font-size: 1.5vw; 				/* als percentage van de maximale breedte van het scherm */	
	color: #383333;
	font-family: Arial, Helvetica, sans-serif;
}

/*normale header:*/
t2 
{
	font-size: 1.75vw; 				/* als percentage van de maximale breedte van het scherm */	
	color: #ff8c00;
	font-family: Arial, Helvetica, sans-serif;
}

/*tekst voor footer:*/
t3 
{
	font-size: 1.0vw; 				/* als percentage van de maximale breedte van het scherm */	
	color: #383333;
	font-family: Arial, Helvetica, sans-serif;
}

/*tekst voor calculater page:*/
t4
{
	font-size: 1.25vw; 				/* als percentage van de maximale breedte van het scherm */	
	color: #383333;
	font-family: Arial, Helvetica, sans-serif;
}

/* ============================== EINDE LETTERTYPE LAYOUT ============================ */


/* ================================== DEFINITIE DIV's ===================================*/
/* === Definieer div class dat alleen in het midden zit === */
.center {
  margin: auto;						/* oplijnen in het horizontal midden */
  width: 100%;
  padding: 0px;
  /*background-color: red;*/
}

.top {
  margin: auto;						/* oplijnen in het horizontal midden */
  width: 100%;
  height: 80px;
  padding: 0px;
  /*background-color: green;*/
}

.footer {
  margin: auto;						/* oplijnen in het horizontal midden */
  width: 100%;
  padding: 10px;
  text-align: center;
  /*background-color: red;*/
  float: left;
}

/* === Definieer div class dat alleen links zit === */
.left {
  /*background-color: #f1f1f1;*/
  padding: 20px;
  float: left;
  width: 20%; 
}


/* === Definieer div class dat alleen links zit === */
.toc {
  /*background-color: #f1f1f1;*/
  padding: 20px;
  float: left;
  position: fixed;
  width: 20%; 
}

/* === Definieer div class dat alleen rechts zit === */
.right {
  /*background-color: #f1f1f1;*/
  padding: 20px;
  float: left;
  width: 80%; 
}

/* === Definieer div class gebruikt voor de calculator_input === */
.calculator_input {
  /*background-color: pink;*/
  padding: 20px;
  float: left;
  width: 40%; 
  /*height: 750px;*/
}

/* === Definieer div class gebruikt voor de calculator_output === */
.calculator_output {
  /*background-color: blue;*/
  padding: 20px;
  float: left;
  width: 60%; 
  /*height: 750px;*/
}

/* === Definieer div class gebruikt voor de calculator_drawing === */
.calculator_drawing {
  /*background-color: #f1f1f1;*/
  padding: 20px;
  float: left;
  width: 30%; 
  height: 300px;
}

/* === Definieer div class gebruikt om de tekst 100 px lager te beginnen === */
.text {
  scroll-margin-top: 100px;
}

/* ================================== EINDE DEFINITIE DIV's ===================================*/

/* =============================== TABEL OPMAAK =========================*/
table.images_center_allign 
{ 
 	width: 100%;

}
table.images_center_allign td
{
   	text-align: center;
}

table.images_left_allign 
{
 
   width: 100%;
}

table.images_left_allign td
{
   text-align: left;
  
   
}

table.rocket_engines 
{
   border-collapse: collapse;
   width: 100%;
}
table.rocket_engines td
{
   border: 1px solid black;
}

/*Hieronder omeven een achtergrond kleur toe te vogen*/
table.rocket_engines th
{
	text-align: left;
	border: 1px solid black;
  	background-color: #ffb052;
}

/*Hieronder omeven een achtergrond kleur toe te voegen*/
table.rocket_engines tr:nth-child(odd) 
{
  background-color: #dedede;
}

table.calc
{
   border-collapse: collapse;
}
table.calc td
{
   border: 1px solid black;
   padding: 5px;
}

/*Hieronder omeven een achtergrond kleur toe te vogen*/
table.calc th
{
	text-align: left;
	border: 1px solid black;
  	background-color: #ffb052;
	padding: 5px;
}

/*Hieronder omeven een achtergrond kleur toe te voegen*/
table.calc tr:nth-child(odd) 
{
  background-color: #dedede;
}


/* =============================== EINDE TABEL OPMAAK =========================*/


/*================================LINK OPMAAK =========================*/
a:link {
  text-decoration: none;
  color: #383333;
}

a:visited {
  text-decoration: none;
  color: #383333;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: none;
}

/*================================ EINDE LINK OPMAAK =========================*/

/* ====================================  HORIZONTAL LINE ==========================*/
hr.rocket_engine
{
  border: 1px solid #ff8c00;
}
/* ====================================  END HORIZONTAL LINE ==========================*/



/* ================================= NAV BAR ======================================*/
.navbar-top {
  margin: 0;
  padding: 0;
  width: 100%;
  top: 0;
  position: fixed;
  z-index: 2;
}

/* Code om knoppen bij elkaar op te lijnen*/
.btn-group {
  display: flex;
  flex-wrap: wrap;
  z-index: 2;
}

/* Achtergrondkleur nav bar*/
.navbar {
  overflow: hidden;
  background-color: #ff8c00;
  top: 0;
  width: 100%;
  z-index: 2;
}

.navbar a {
	float: left;
  	font-size: 16px;
	color: white;
  	text-align: center;
  	padding: 30px 30px;
  	text-decoration: none;
 	z-index: 2;
}

.dropdown {
  float: left;
  overflow: hidden;
  z-index: 2;
}

.dropdown .dropbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 30px 30px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  z-index: 2;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #ffb052;
  z-index: 2;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 2;

}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  z-index: 2;
  
}

.dropdown-content a:hover {
  background-color: #ddd;
  z-index: 2;
}

.dropdown:hover .dropdown-content {
  display: block;
  z-index: 2;
}

/* ================================= EINDE NAV BAR ======================================*/

/* === Defineer dat bij een px breedte van 800 alles onder elkaar zet === */
/* Use a media query to add a break point at 600px: */
@media screen and (max-width: 600px) {
  .left, .right, .center{
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }